<template>
    <div>
        <div class="title">
            <Row type="flex" justify="space-between" class="code-row-bg">
                <Col span="17"><span class="title-option">{{option.title}}</span></Col>
                <Col span="2"><Icon class="icon" type="md-arrow-round-forward" /></Col>
            </Row>
        </div>
        <div>
            <Row :gutter="20">
                <Col span="12">
                    <div class="report">
                        <div class="report-little">举报电话</div>
                        <span class="report-down">024-89860315</span>
                    </div>
                </Col>
                <Col span="12">
                    <div class="report">
                        <div class="report-little">举报邮箱</div>
                        <span class="report-down">sbxqjw@163.com</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div>
            <Row :gutter="20">
                <Col span="12">
                    <div class="report">
                        <div class="report-little">举报地址</div>
                        <span class="report-down">沈阳市沈北新区北路39-1号</span>
                    </div>
                </Col>
                <Col span="12">
                    <div class="report">
                        <div class="report-little">来访地址</div>
                        <span class="report-down">沈阳市沈北新区北路39-1号</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div>
            <Row :gutter="20">
                <Col span="12">
                    <div class="button">
                        <div class="button-little" @click="report">立即举报</div>
                    </div>
                </Col>
                <Col span="12">
                    <div class="button">
                        <div class="button-little">举报查询</div>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
  name: 'SiteCompoments',
  props: {
    option: {
      type: Object,
      default: () => {
        return {
          title: ''
        }
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    report () {
      this.$emit('result', 3)
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="less">
    .title{
        border-top: 3px #0166b6 solid;
        height: 50px;
        font-weight: bolder;
        background-color: #ebebeb;
        font-size: 20px;
        line-height: 50px;
        color: #0166b6;
        &-option{
            margin-left: 10px;
        }
    }
    .report{
        margin-top: 15px;
        width: 332px;
        height: 120px;
        background-color: #ebebeb;
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        &-little{
            width: 230px;
            height: 50px;
            background-color: #0166b6;
            margin-left: 50px;
            font-size: 18px;
            color: white;
            line-height: 50px;
            border-radius: 5px;
         }
        &-down{
            color: #0166b6;
            font-size: 18px;
            margin-top: 10px;
        }
    }
    .button{
        width: 332px;
        height: 65px;
        background-color: #ebebeb;
        margin-top: 15px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        &-little{
            width: 230px;
            height: 50px;
            background-color: #0166b6;
            margin-left: 50px;
            font-size: 18px;
            color: white;
            line-height: 50px;
            border-radius: 5px;
            text-align: center;
        }
        &-little:hover{
            width: 230px;
            height: 50px;
            background-color: white;
            margin-left: 50px;
            font-size: 18px;
            color: #0166b6;
            line-height: 50px;
            border-radius: 5px;
            text-align: center;
            border: 2px #0166b6 solid;
            cursor: pointer;
        }
    }
    .icon{
        cursor:pointer
    }
</style>
